// 1,随机一个字母显示到页面上:

// 声明一个全局变量，记录随机字母
var char;
var span = document.getElementById('one');
function getRandomCharacter() {
    // 创建一个字符串
    var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // 生成一个随机数
    var random = Math.ceil(Math.random() * 25);
    char = str[random];
    console.log(char);

    // 找到span标签：

    // toLowerCase:转换为小写
    // toUpperCase：转换为大写
    span.innerText = char.toUpperCase();
}
// 调用方法，随机字母
getRandomCharacter();
// 声明变量，记录正确错误的
var right = 0 ;
var error = 0 ;

// 监听按键输入，进行字符对比：
window.onkeyup = function (event) {
    // console.log(event.key);
    var key = event.key;
    // 都转化为大写（或小写）再对比
    if (key.toUpperCase() == char.toUpperCase()) {
        console.log('对比成功');
        right ++;
        // 在次随机一个字符
        getRandomCharacter();
    } else {
        console.log('对比失败');
        // 添加动画样式类
        span.classList.add('animated');
        span.classList.add('shake');
        span.style.color = 'yellow';
        error ++;
        // 延迟1s删除动画样式类

        // setTimeout:延迟函数
        // para1：操作函数
        // para2：延迟时间，以毫秒为单位
        setTimeout(function () {
            span.classList.remove('animated');
            span.classList.remove('shake');
            span.style.color = 'black';
        }, 1000);
    }
    // 计算正确率：
    // toFixed():保留几位小数
    var rightRate = right/(right+error);
    var span2 = document.querySelector('div>span:nth-child(3)');
    span2.innerHTML = '正确次数是'+right+',错误次数是'+error+'。正确率是'+rightRate.toFixed(1)+'!';
}

// **修改样式类的方法**
// 1)ele.classList.add('样式类的名称'):在原有的样式类基础上添加新的样式类。
// 2)ele.className = '样式类的名称' :会把原有的样式类覆盖掉。


// 计时器：
// 每隔一定的时间执行一次函数：单位：毫秒
setInterval(function(){
    console.log('-------');
},1000);